<?php echo $header;?>
<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <h1 class="page-header"><?php echo $title;?></h1>

            <div class="container-fluid" >
                <ul class="nav nav-tabs sub-tabs ypf-taber">
                    <li data-triggerType="click"
                        data-requestUrl="<?php echo $actions['getLoggedMemberInfo'];?>"
                        data-requestType="post"
                        data-requestParams=""
                        data-triggerAuto="true" data-callback="callback_basic"
                        class="active first">
                        <a href="#edit_basic" role="tab" data-toggle="tab" >个人信息</a>
                    </li>
                    <li data-triggerType="click"
                        data-requestUrl=""
                        data-requestType="post"
                        data-requestParams="status=1"
                        data-callback="callback_logList"
                         class="">
                        <a href="#edit_pass" role="tab" data-toggle="tab" >密码修改</a>
                    </li>
                </ul>
                <div class="tab-content sub-tab-content">
                    <div id="edit_basic" class="tab-pane fade active in">
                        <form id="basic-container">

                        </form>
                    </div>
                    <div id="edit_pass" class="tab-pane fade">
                        <div class="alert alert-warning alert-dismissible" role="alert" style="margin-top: 10px;">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <strong>密码设置规则：</strong>
                            <br/>1. 不能为空<br/>
                                2. 长度大于8位<br/>
                                3. 不能纯数字<br/>
                                4. 不能纯字母<br/>
                                5. 不能和用户名相同<br/>
                        </div>
                        <form>
                            <table class="table table-bordered" style=" margin-top: 15px;">
                                <tbody>
                                <tr>
                                    <td style="width: 20%;">
                                        <span>旧密码：</span>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input type="password" name="old_password" value="" class="form-control input-sm" style="width: 230px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%;">
                                        <span>新密码：</span>
                                    </td>
                                    <td>
                                        <div class="input-group">
                                            <input type="password" name="new_password" value="" class="form-control input-sm" style="width: 230px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 20%;">
                                        <span>密码确认：</span>
                                    </td>
                                    <td>
                                        <input type="password" name="confirm_password" value="" class="form-control input-sm" style="width: 230px;"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>&nbsp;</span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-default btn-success"
                                                data-class="action"
                                                data-action="editPass">保存密码</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            <?php echo $footer;?>
        </div>
    </div>
</div>
<script src="/static/handlebars-v3.0.3.js"></script>
<script src="/static/jquery/jquery-plugins/ypf-taber.js"></script>
<link href="/static/bootstrap/css/bootstrap-switch.css" rel="stylesheet">
<script src="/static/bootstrap/js/bootstrap-switch.min.js"></script>
<script>
    $(function(){
        Handlebars.registerHelper('formatStatus', function(status){
            return 1 == status ? '<span class="label label-success">启用</span>' : '<span class="label label-warning">禁用</span>';
        });
        layer.config({
            skin:'layer-ext-moon',
            extend:'skin/moon/style.css'
        });
        $(document).off('click', "[data-class='action']").on('click', "[data-class='action']", function(){
            var _this = $(this),
                current_action = $(this).attr('data-action'),
                old_password = $('input[name=old_password]').val(),
                new_password = $('input[name=new_password]').val(),
                confirm_password = $('input[name=confirm_password]').val();
            switch (current_action){
                case 'editPass':
                    if('' == old_password) {
                        layer.msg('旧密码不能为空！', {icon:0});
                    }else if('' == new_password) {
                        layer.msg('新密码不能为空！', {icon:0});
                    }else if('' == confirm_password) {
                        layer.msg('确认密码不能为空！',{icon:0});
                    }else if(confirm_password != new_password){
                        layer.msg('新密码和确认密码不相同！', {icon:0});
                    }else{
                        layer.confirm('确定要修改密码？', {icon: 3, title:'提示'}, function() {
                            $.post(
                                "<?php echo $actions['editPass'];?>",
                                {old_password: old_password, new_password: new_password},
                                function (res) {
                                    layer.msg(res.info, {icon:res.status});
                                }
                            )
                        });
                    }
                    break;
                case 'saveBasic':
                    layer.confirm('确定要修改？', {icon: 3, title:'提示'}, function() {
                        $.post(
                            "<?php echo $actions['saveBasic'];?>",
                            $('#basic-container').serialize(),
                            function (res) {
                                layer.msg(res.info, {icon:res.status});
                            }
                        )
                    });
                    break;
                case 'manager':
                    layer.open({
                        type: 2,
                        title: $(this).attr('data-title'),
                        shadeClose: true,
                        shade: 0.8,
                        area: ['800px', '90%'],
                        content: $(this).attr('data-url')+'?role_id='+$(this).attr('data-id'),
                        cancel:function(){
                        }
                    });
                    break;
                default:
                    break;
            }
            return false;
        });
        var callback_maps = {
            'callback_basic': function (res) {
                $('#basic-container').handlebars($('#basic-template'), res);
            }
        };
        $('.ypf-taber').find('li').YpfTaber({
            'callback_maps':callback_maps
        });
    });
</script>

<script id="basic-template" type="x-tmpl-mustache">
    <table class="table table-bordered" style=" margin-top: 15px;">
        <tbody>
        <tr>
            <td style="width: 10%;">
                <span>用户名：</span>
            </td>
            <td>
                <div class="input-group">
                    <input type="text" name="account" value="{{account}}" class="form-control input-sm" style="width: 230px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">
                <span>昵称：</span>
            </td>
            <td>
                <div class="input-group">
                    <input type="text" name="nickname" value="{{nickname}}" class="form-control input-sm" style="width: 230px;"/>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">
                <span>角色：</span>
            </td>
            <td>
                <div class="input-group">
                    <input type="text"  value="{{name}}" readonly class="form-control input-sm" style="width: 230px;"/>&nbsp;
                    <button data-title="权限管理" data-id="{{role_id}}" data-url="{{manager}}" data-action="manager" data-class="action" class="btn btn-primary" type="button">查看权限</button>
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">
                <span>手机号：</span>
            </td>
            <td>
                <input type="text" name="mobile" value="{{mobile}}" class="form-control input-sm" style="width: 230px;"/>
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">
                <span>状态：</span>
            </td>
            <td>
                <div class="switch has-switch">
                     {{{formatStatus status}}}
                </div>
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">
                <span>备注：</span>
            </td>
            <td>
                <textarea name="remark" style="width:250px;height:100px;">{{remark}}</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <span>&nbsp;</span>
            </td>
            <td>
                <button type="button" class="btn btn-default btn-info"
                        data-class="action" data-url="<?php echo $actions['saveBasic'];?>"
                        data-action="saveBasic">保 存</button>
            </td>
        </tr>
        </tbody>
    </table>
</script>
